<template>
  <div>
    <el-button size="mini" type="primary" @click="dialog"
      >选取图片</el-button
    >
    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      class="dialog"
    >
      <div v-for="(item,index) in list" :key="index" class="imageList">
        <p>{{item.name}}123</p>
        <div>
          <img :src="api+item2" alt="" v-for="(item2,index2) in item.list" :key="index2" @click="cliImage(item2)">
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Api from "@/api/api.js";
import request from '../../api/request';
export default {
  data() {
    return {
      dialogVisible: false,
      list:null,
      api:Api.API_HEADER
    };
  },
  methods: {
    dialog() {
      this.getUrlData()     
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    getUrlData(){
      let params = {
        method: "GET",
        url: Api.getImageUrlList,
      };
      request(params)
        .then((result) => {
          if (result.status == 3) {
            this.$message.error("用户登录失效");
            this.$router.push({ name: "bolgHome" });
          } else if (result.status == 0) {
            this.list = result.data;   
            this.dialogVisible = true         
          }
          
        })
        .catch((err) => {
        });
    },
    cliImage(item){
      this.$emit("cliUrl",item)
      this.dialogVisible = false
    }
  },
};
</script>

<style lang="less" scoped>
.imageList{
  img{
    width: 90px;
    height: 70px;
    margin-right: 10px;
  }
  img:hover{
     cursor:pointer
  }
}
.el-dialog{
  background-color: #e1e1e1;
}
</style>